@gray: #888888;
@size-font: 28rpx;
@space-big: 30rpx;
@gray-border: #e5e5e5;

.page-my-business-card {
  .avatar-wrap {
    padding: @space-big;
    margin-top: @space-big;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .avatar {
    width: 200rpx;
    height: 200rpx;
    border-radius: 5px;
  }
  .avatar-text {
    color: @gray;
    font-size: @size-font;
    margin-right: 10rpx;
  }
  .change-avatar {
    display: flex;
  }
  .group-title {
    margin: 20rpx @space-big;
  }
  .introduction {
    background: #fff;
    height: 150rpx;
    padding: 0 20rpx;
    .word-count {
      position: relative;
      bottom: 50rpx;
      left: 100%;
      margin-left: -50rpx;
      color: @gray;
    }
  }
  .textarea {
    width: 100%;
    height: 100%;
  }
  .form-items {
    display: block;
    margin-top: @space-big;
    border-top: 1rpx solid @gray-border;
    border-bottom: 1rpx solid @gray-border;
    background: #fff;
    margin-bottom: 180rpx;
    .form-item {
      padding: 20rpx @space-big 20rpx 0;
      margin-left: @space-big;
      display: flex;
      justify-content: space-between;
      text-align: right;
    }
    .form-item-border {
      border-bottom: 1rpx solid @gray-border;
    }
    .form-input {
      color: @gray;
      font-size: @size-font;
    }
  }
  .btn-wrap {
    padding: @space-big 0;
    background: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
    .btn-form {
      margin: 0 @space-big;
    }
  }
  .icon-arrow {
    width: @space-big;
    height: @space-big;
  }
  .phone-wrap {
    display: flex;
    align-items: center;
    position: relative;
    left: 6rpx;
    font-size: @size-font;
  }
  .phone {
    margin-right: 10rpx;
    color: @gray;
    font-size: @size-font;
  }
}
